Vue.component('Update', {
  template: `
		<el-dialog title="修改" width="830px" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
			<div id="goods_form_app">
      <div class="tabBar cl"  style=" position: sticky; top: -10px; z-index: 1; background: #fff;">
        <span :class="{current:config.group==1}" @click="config.group=1">基本信息</span>
        <span :class="{current:config.group==5}" @click="config.group=5">详情</span>
        <span v-if="false" :class="{current:config.group==7}" @click="config.group=7">活动设置</span>
        <span v-if="false" :class="{current:config.group==3}" @click="config.group=3">包装</span>
        <span v-if="false" :class="{current:config.group==4}" @click="config.group=4">运费</span>
        <span v-if="false" :class="{current:config.group==8}" @click="config.group=8">砍价设置</span>
      </div>
			<div style="min-height:200px; padding-top:10px;">

      <el-form  :size="size" ref="data" :model="data" :label-width=" 1?'90px':'16%'">
        <template v-if="config.group==1">
          <el-form-item label="名称" prop="goods_name">
            <el-input v-model="data.goods_name" autoComplete="off" clearable  placeholder="请输入名称"></el-input>
          </el-form-item>

          <div class="flex">
            <el-form-item style="width:25%;" label="分类" prop="cate_id">
              <el-select v-model="data.cate_id" placeholder="选择分类" size="mini">
                <el-option :key="0" :value="0" label="默认" />
                <el-option v-for="item in cate_arr" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item style="width:25%;" label="品牌" prop="brand_name">
              <el-input v-model="data.brand_name" autoComplete="off" clearable  placeholder="请输入品牌"></el-input>
            </el-form-item>
          
            <el-form-item style="width:25%;" label="价格" prop="shop_price">
              <el-input v-model="data.shop_price" autoComplete="off" clearable  placeholder="请输入价格"></el-input>
            </el-form-item>
            <el-form-item style="width:25%;" label="市场价格" prop="market_price">
              <el-input v-model="data.market_price" autoComplete="off" clearable  placeholder="请输入市场价格"></el-input>
            </el-form-item>
          </div>

          <div class="flex">
            <el-form-item style="width:25%;" label="限购数量" prop="buy_max">
              <el-input v-model="data.buy_max" autoComplete="off" clearable placeholder="请输入限购数量"></el-input>
            </el-form-item>
            <el-form-item style="width:25%;" label="库存数量" prop="goods_number">
              <el-input v-model="data.goods_number" autoComplete="off" clearable placeholder="请输入库存数量"></el-input>
            </el-form-item>
            <el-form-item style="width:25%;" label="库存告警" prop="warn_number">
              <el-input v-model="data.warn_number" autoComplete="off" clearable placeholder="请输入库存告警设置"></el-input>
            </el-form-item>
            <el-form-item style="width:25%;" label="供货方" prop="supplier">
            <el-input v-model="data.supplier" autoComplete="off" clearable placeholder="请输入供货方"></el-input>
          </el-form-item>
          </div>

          <div class="flex">
            <el-form-item style="width:50%;" label="限领单位" prop="org_id">
              <el-select v-model="data.org_id" placeholder="请选择" size="mini">
                <el-option :key="0" :value="0" label="不限制" />
                <el-option v-for="item in org_arr" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item style="width:50%;" label="上架时间" prop="sale_time">
              <el-date-picker v-model="data.sale_time" type="datetime" placeholder="datetime" />
            </el-form-item>
          </div>

          <el-form-item label="图片" prop="sale_time">
            <div class="flex">
              <el-upload
                ref="uploadGoodsImg"
                :multiple="false"
                :show-file-list="true"
                :action="'/admin/upload/save'"
                :limit="1"
                :auto-upload="true"
                :with-credentials="true"
                :on-success="handleSuccessGoodsImg"
                >

                <div v-if="data.goods_img">
                  <div style="padding-right:5px;">
                    <el-image :src="data.goods_img" :preview-src-list="[data.goods_img]" style=" height: 100px; width:100px; border-radius:5px; "></el-image>
                  </div>
                  <div style=" color:green; line-height: 1; text-align: center; cursor: pointer;">选择主图</div>
                </div>

                <div v-else class="pic-uploader">
                  <i class="el-icon-plus " />
                </div>

              </el-upload> 

              <div v-for="(item,index) in data.goods_img_other" :key="index" style="padding-right:5px;">
                <el-image :src="item" :preview-src-list="[item]" style=" height: 100px; width:100px; border-radius:5px; position:absoti"></el-image>
                <div style=" color:red; line-height: 1; text-align: center; cursor: pointer;" @click="data.goods_img_other.splice(data.goods_img_other.indexOf(item),1)">删除</div>
              </div>
              <div style="width:25%"  v-if="!data.goods_img_other || data.goods_img_other.length <4 ">
                <el-upload 
                  
                  ref="upload"
                  :multiple="true"
                  :show-file-list="true"
                  :action="'/admin/upload/save'"
                  :limit="4"
                  :auto-upload="true"
                  :with-credentials="true"
                  :on-success="handleSuccessOtherPic"
                >
                  <div class="pic-uploader">
                    <i class="el-icon-plus " />
                  </div>
                  <div slot="tip" class="el-upload__tip"></div>
                </el-upload>
              </div>
            </div>    
          </el-form-item>

          <el-form-item label="规格型号" prop="sale_time">
            <table class="f-table">
              <tbody>
                <tr v-for="(item,__i) in data.sku" :key="__i">
                  <th>规格：</th>
                  <td><input v-model="item.name" type="text" class="input-text" style="width: 100px;"></td>
                  <th>数量：</th>
                  <td><input v-model="item.num" type="text" class="input-text" style="width: 100px;"></td>
                  <th>价格：</th>
                  <td><input v-model="item.price" type="text" class="input-text" style="width: 100px;"></td>
                  <td>
                      <el-button v-if="__i>0" type="danger" plain size="mini" @click="removeSku(__i)">删除</el-button>
                      <el-button v-if="__i==0" type="primary" plain size="mini" @click="addSku">+增加</el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-form-item>


        </template>
      </el-form>


      <table v-if="config.group==100" class="f-table">
        <thead />
        <tbody>
          <!--<tr>
            <th style="width: 100px;">编号</th>
            <td>
              <input v-model="data.goods_sn" type="text" class="input-text" style="width: 150px;">
              <span v-if="!data.id">
                自动ID：<input v-model="data.new_id" type="text" class="input-text" style="width: 150px;">
                输入后不会自动生成。
              </span>
            </td>
          </tr>-->
           
 
 

          <!--<tr>
            <th>简名</th>
            <td>
              <input v-model="data.goods_short_name" type="text" class="input-text" style="width: 200px;">
            </td>
          </tr>-->
				 
         
				 
          <tr v-if="data.goods_type==4">
            <th>兑换积分</th>
            <td>
              <input v-model="data.integral" type="text" class="input-text">
            </td>
          </tr>
          
          <tr v-if="0">
            <th>限定VIP级别</th>
            <td>
              <label class="select-box" style="width:150px">
                <select v-model="data.v_level" class="select" size="1">
                  <option value="0" selected>不限定</option>
                  <option value="<?php echo $e['v_id']; ?>" />
                </select>
              </label>
            </td>
          </tr>

         

          <tr v-if="0">
            <th>分销设置</th>
            <td>
              一级佣金：¥ <input v-model="data.fx_1" type="number" class="input-text" style="width: 60px;">，
              二级佣金：¥ <input v-model="data.fx_2" type="number" class="input-text" style="width: 60px;">，
              三级佣金：¥ <input v-model="data.fx_3" type="number" class="input-text" style="width: 60px;">
            </td>
          </tr>
          <tr v-if="0">
            <th>赠送积分</th>
            <td>
              <input v-model="data.give_integral" type="text" class="input-text" style="width: 80px;">
            </td>
          </tr>
          
          <tr v-if="0">
            <td>快递服务展示</td>
            <td>
              <span class="select-box" style="width: 100px;"><select v-model="data.shipping_name" class="select">
                <option value="">不选</option>
                <option value="包邮">包邮</option>
                <option value="顺丰">顺丰包邮</option>
                <option value="-1">收费</option>
              </select>
              </span>
              费用：<input v-model="data.shipping_fee" type="text" class="input-text" style="width: 100px">
            </td>
          </tr>
        </tbody>
      </table>

      

      

      <table v-if="config.group==7" class="f-table">
        <tr>
          <th>是否促销：</th>
          <td>
            <input v-model="data.is_promote" type="checkbox" value="1">
            <span v-if="data.is_promote">
              开始时间：
              <input id="is_promote" v-model.lazy="data.promote_start_date"
                     type="text"
                     onfocus="WdatePicker()" value=""
                     autocomplete="off"
                     onchange="" class="input-text Wdate" style="width:120px;"
              >
              结束时间：
              <input id="is_promote" v-model.lazy="data.promote_end_date"
                     type="text"
                     onfocus="WdatePicker()" value=""
                     autocomplete="off"
                     onchange="" class="input-text Wdate" style="width:120px;"
              >
            </span>
          </td>
        </tr>
      </table>

      <table v-if="config.group==3" class="f-table">
        <tbody>
          <tr v-for="(item,i) in data.pack" :key="i">
            <td>
              包装：<input v-model="item.name" type="text" class="input-text" style="width: 100px;"><br>
              价格：<input v-model="item.price" type="text" class="input-text" style="width: 100px;"><br>

              <div class="text-r">
                <button type="button" class="btn btn-xs text-gray" @click="removePack(i)">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <button type="button" class="btn btn-secondary" @click="addPack">+增加包装价格</button>
            </td>
          </tr>
        </tbody>
      </table>

      <table v-if="config.group==4" class="f-table">
        <tbody>
          <tr v-for="(item,i) in data.express_fee" :key="i">
            <td>
              快递：<input v-model="item.name" type="text" class="input-text" style="width: 100px;"><br>
              价格：<input v-model="item.price" type="text" class="input-text" style="width: 100px;"><br>

              <div class="text-r">
                <button type="button" class="btn btn-xs text-gray" @click="remove_express_fee(i)">删除</button>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <button type="button" class="btn btn-secondary" @click="add_express_fee">+增加运费</button>
            </td>
          </tr>
        </tbody>
      </table>

      <table v-if="config.group==5" class="f-table" style="min-height:791;">
        <tbody>
          <tr>
            <td>
							<wang-editor v-if="config.group==5" :wangcontent.sync="data.content"></wang-editor>
            </td>
          </tr>
        </tbody>
      </table>

      <table v-if="config.group==8" class="f-table">
        <tbody>
          <tr>
            <th style="width: 100px;">分享人数</th>
            <td>
              <el-input-number v-model="data.kanjia_share_count" size="mini" controls-position="right" />
            </td>
          </tr>
          <tr>
            <th style="width: 100px;">分享时间限制</th>
            <td>
              <el-input-number v-model="data.kanjia_share_hour" size="mini" controls-position="right" /> 小时
              比如：48小时之内分享有效，那么就填写 48
            </td>
          </tr>
          <tr>
            <th style="width: 100px;">砍价按钮倒计时</th>
            <td>
              <el-input-number v-model="data.kanjia_btn_countdown" size="mini" controls-position="right" /> 小时
              比如：多少秒后，才能让他点砍价
            </td>
          </tr>
          <tr>
            <th style="width: 100px;">黄条文字</th>
            <td>
              <el-input v-model="data.kanjia_yellow_text" size="mini" />
              <br> 下单购买上面的倒计时文字
            </td>
          </tr>

          <tr>
            <th style="width: 100px;">下单按钮文字</th>
            <td>
              <el-input v-model="data.kanjia_btn_text" size="mini" />
            </td>
          </tr>
          <tr>
            <th style="width: 100px;">邀请按钮文字</th>
            <td>
              <el-input v-model="data.kanjia_btn_text_1" size="mini" />
            </td>
          </tr>
          <tr>
            <th>标签文字</th>
            <td>
              <el-select v-model="data.tags" multiple filterable allow-create default-first-option placeholder="添加表情" size="mini" style="width:100%; ">
                <el-option v-for="item in config.tags" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </td>
          </tr>
        </tbody>
      </table>
			</div>

      <div class="padding" style="position: sticky; bottom: 0;padding-top:10px; background:#fff;">
        <el-button type="primary" @click="doSave">保存修改</el-button>
        <el-button type="warning" @click="doClose">关闭</el-button>
      </div>
    </div>
		</el-dialog>
	`
  ,
  components: {
    'treeselect': VueTreeselect.Treeselect,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    info: {
      type: Object,
    },
  },
  data() {
    return {
      current: 1,
      data: {
        warn_number: 5
      },
      cate_arr: [],
      org_arr: [],
      pts: [],
      config: {
        group: 1, tags: [
        ]
      },
      search: [],
      result: { list: {}, pageInfo: {} }
    }
  },
  watch: {
    "data.sku": {
      handler(val, oldVal) {
        if (val.length == 0) {
          this.$set(this.data, "sku", [{
            name: "默认", num: 0, price: 0
          }])
        }
      },
      deep: true //true 深度监听
    },
    show(val) {
      if (val) {
        this.data = this.info
        this.config.group = 1
        let that = this
        axios.post('/admin/goods/cateList.html', param).then(res => {
          console.log(res.data.data.data)
          if (res.data.status == 200) {
            that.cate_arr = res.data.data.data
          } else {
            that.$message.error(res.data.msg);
          }
        })

        axios.post('/admin/org/index.html', param).then(res => {
          if (res.data.status == 200) {
            that.org_arr = res.data.data.data
          } else {
            that.$message.error(res.data.msg);
          }
        })
      }
    }
  },
  methods: {
    handleSuccessGoodsImg(response, file, fileList) {
      this.$set(this.data, 'goods_img', response['result'])
      this.$refs.uploadGoodsImg.clearFiles()
    },
    handleSuccessOtherPic(response, file, fileList) {
      if (!this.data.goods_img_other) {
        this.$set(this.data, 'goods_img_other', [])
      }

      this.data.goods_img_other.push(response['result'])
      this.$refs.upload.clearFiles()
    },
    doClose() {
      this.$emit('onSuccess', '')
    },
    doSave() {
      var vm = this
      if (!this.data.goods_name || this.data.goods_name === '') {
        this.$alert('请输入名称')
        return
      }

      // if (!this.data.goods_number || this.data.goods_number < 1) {
      //   this.$alert('请输入库存')
      //   return
      // }

      if (!this.data.shop_price || this.data.shop_price === '') {
        this.$alert('请输入金额')
        return
      }
      let submitData = Object.assign({}, this.data)
      submitData.goods_img_other = submitData.goods_img_other ? JSON.stringify(submitData.goods_img_other) : "[]"
      submitData.pack = submitData.pack ? JSON.stringify(submitData.pack) : "[]"
      if (submitData.sku) {
        submitData.sku.forEach(function (sku, k) {
          submitData.sku[k].num = parseInt(sku.num)
          submitData.sku[k].price = parseFloat(sku.price)
        });
        submitData.sku = JSON.stringify(submitData.sku)
      } else {
        submitData.sku = '[]'
      }


      axios.post('/admin/goods/save', submitData).then(res => {
        // console.log(res.data.status)
        if (res.data.status == 200) {
          vm.$emit('refesh_list', '')
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(e => {
        console.log(e)
        this.$message.error(e)
      })
    },
    initForm() {
      if (this.formDataId > 0) {
        this.$http.post('goods/goods_get', { id: this.formDataId }).then(resp => {
          this.data = resp.data

          if (resp.data.content == null) {
            this.$refs.editor.setContent('')
          } else { this.$refs.editor.setContent(resp.data.content) }
        })
      } else {
        this.data = {}
      }
    },
    goods_type_changed(e) {
      this.data.cate_id = 0
    },
    add_express_fee() {
      if (!this.data.express_fee) {
        this.$set(this.data, 'express_fee', [])
      }

      this.data.express_fee.push({ 'name': '', 'price': 0.00 })
    },
    remove_express_fee(i) {
      this.data.express_fee.splice(i, 1)
    },
    addSku() {
      if (!this.data.sku) {
        this.$set(this.data, 'sku', [])
      }

      this.data.sku.push({ 'name': '规格' + (this.data.sku.length + 1), num: 1, 'price': 0.00 })
    },
    removeSku(i) {
      this.data.sku.splice(i, 1)
    },
    addPlan() {
      if (!this.data.plans) {
        this.$set(this.data, 'plans', [])
      }

      this.data.plans.push({ 'name': '', 'price': 0.00 })
    },
    removePlan(i) {
      this.data.plans.splice(i, 1)
    },
    remove(e) {
      var target = e.srcElement ? e.srcElement : e.target

      this.data.goods_img_other.splice(target.dataset.id, 1)
    },

    addPack() {
      if (!this.data.pack) {
        this.$set(this.data, 'pack', [])
      }

      this.data.pack.push({ 'name': '', 'price': 0.00 })
    },
    removePack(i) {
      this.data.pack.splice(i, 1)
    },
    open() {
      this.form = this.info
      if (this.info.pid == '0') {
        this.$delete(this.info, 'pid')
      }
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          axios.post('/admin/goods/update', this.form).then(res => {
            if (res.data.status == 200) {
              this.$message({ message: res.data.msg, type: 'success' })
              this.$emit('refesh_list')
              this.closeForm()
            } else {
              this.loading = false
              this.$message.error(res.data.msg)
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.val,
        label: node.key,
        children: node.children
      }
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
    },
  }
})
